<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>UNIS Design System v4</title>
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="../styles/global.css">
    <link rel="stylesheet" href="css/unis.css">
    <script type="text/javascript" src="../js/vue.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid" id="app">
    <div class="row bg-pearl-blue" style="padding-top: 15px;">
        <div class="col-8">
            <h2>06. Iconography</h2>
            <p style="padding-left: 46px;">The following CSS files need to be introduced.</p>
            <p style="padding-left: 46px;">Place fonts in the fonts folder under CSS</p>
        </div>
        <div class="col-4" style="text-align: right; padding-top: 30px;"><a class="btn btn-primary"
                                                                            href="./css/fonts.zip"
                                                                            download="fonts.zip">download
            (fonts.zip)</a></div>
    </div>
    <div class="d-flex flex-row">
        <div class="col-12 isolation">
            <div>
                <h2 class="Primary">Iconography</h2>
                <p>The size of icons is controlled by font size and the color is controlled by color.</p>
                <hr>
            </div>
            <div v-for="(ic, index) in icons" :id="'section'+index">
                <div class="btn-code">
                    <div class="code-label top-0 blue">
                        <div class="unis-arrow left "></div>
                        <div class="unis-arrow right "></div>
                    </div>
                    <input type="checkbox" class="code-input top-0">
                    <div class="card">
                        <div class="card-header">Example</div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col column" style="font-size: 30px;" v-for="ioc in ic" >
                                    <div >
                                    <div class="subtractive border d-flex justify-content-center align-items-center"
                                         v-html="ioc.html" v-if="ioc.html">
                                    </div>
                                    <span style="font-size: 22px;"> {{ioc.icon}}</span>
                                    </div>
                                    <div class="pre" style="flex: 1;">
                                                        <pre style="font-size:14px;">
                                                            <code class="lang-javascript html code" v-html="ioc.html" s>
                                                            </code>
                                                        </pre>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
    Vue.config.debug = true;
    app = new Vue({
        el: "#app",
        data: {
            icons: [

                [
                    {icon: 'Analytics', html: '<span class="unis-analytics unis-icon"></span>'},
                    {icon: 'Apps', html: '<span class="unis-apps unis-icon"></span>'},
                    {icon: 'Ask', html: '<span class="unis-ask unis-icon"></span>'},
                    {icon: 'Dollar', html: '<span class="unis-dollar unis-icon"></span>'},
                    {icon: 'Cloud', html: '<span class="unis-cloud unis-icon"></span>'},
                    {icon: 'Date', html: '<span class="unis-date unis-icon"></span>'},
                    {
                        icon: 'Filter',
                        html: '<span class="unis-filter unis-icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></span>'
                    },
                    {icon: 'Draw', html: '<span class="unis-draw unis-icon"></span>'},
                    {icon: 'Field', html: '<span class="unis-field unis-icon"></span>'},
                ],
                [


                    {icon: 'Field-Service', html: '<span class="unis-field-service unis-icon"></span>'},
                    {
                        icon: 'Halfastar',
                        html: '<span class="unis-halfastar unis-icon"><span class="path1"></span><span class="path2"></span></span>'
                    },
                    {
                        icon: 'Halfastar2',
                        html: '<span class="unis-halfastar2 unis-icon"><span class="path1"></span><span class="path2"></span></span>'
                    },
                    {icon: 'L-Inbound', html: '<span class="unis-l-inbound unis-icon"></span>'},
                    {icon: 'Inventory', html: '<span class="unis-Inventory unis-icon"></span>'},
                    {icon: 'Plus', html: '<span class="unis-plus unis-icon" ></span>'},
                    {
                        icon: 'Printer',
                        html: '<span class="unis-printer unis-icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span>'
                    },
                    {icon: 'Regulartriangle', html: '<span class="unis-regulartriangle unis-icon"></span>'},
                    {icon: 'returns', html: '<span class="unis-returns unis-icon"></span>'},
                ],

                [{
                    icon: 'R-Inbound',
                    chin: ['Path1', 'Path2'],
                    html: '<span class="unis-r-inbound unis-icon"><span class="path1"></span><span class="path2"></span></span>'
                },
                    {icon: 'Star', html: '<span class="unis-star unis-icon"></span>'},
                    {icon: 'Seek', html: '<span class="unis-seek unis-icon"></span>'},
                    {icon: 'Excalmatory', html: '<span class="unis-sigh unis-icon"></span>'},
                    {icon: 'Rril', html: '<span class="unis-tril unis-icon"></span>'},
                    {icon: 'Time', html: '<span class="unis-time unis-icon"></span>'},
                    {icon: 'Tool', html: '<span class="unis-tool unis-icon"></span>'},
                    {icon: 'Transportation', html: '<span class="unis-transportation unis-icon"></span>'},
                    {icon: 'Trash', html: '<span class="unis-trash unis-icon"></span>'},
                ],
                [

                    {icon: 'Tian', html: '<span class="unis-tian unis-icon"></span>'},
                    {icon: 'Unis', html: '<span class="unis-unis unis-icon"></span>'},
                    {icon: 'Warehouse', html: '<span class="unis-warehouse unis-icon"></span>'},
                    {icon: 'Tick', html: '<i class="unis-tick unis-icon"  style="font-size: 18px;"></i>'},
                    {icon: 'Cross', html: '<i class="unis-cross unis-icon"  style="font-size: 18px;"></i>'},
                    {icon: 'Arrow Up', html: '<span class="unis-arrow up  unis-icon" style="font-size: 18px;"></span>'},
                    {icon: 'Arrow', html: '<span class="unis-arrow unis-icon" style="font-size: 18px;"></span>'},
                    {icon: 'Arrow Left', html: '<span class="unis-arrow left unis-icon" style="font-size: 18px;"></span> '},
                    {icon: 'Arrow Right', html: '<span class="unis-arrow left unis-icon" style="font-size: 18px;"></span> '},
                ],
                [

                    {icon: 'Nabla', html: '<span class="unis-nabla  unis-icon"  style="font-size: 18px;"></span>'},

                ],

            ]

        },

    });
</script>

<script>
    var opts = {
        'indent_size': 4,
        'indent_char': ' ',
        'max_char': 300,
        'brace_style': 'expand',
    }
    var source = document.getElementsByClassName('code');
    for (var i = 0; i < source.length; i++) {
        source[i].innerHTML = style_html(source[i].innerHTML, opts).replace(/</g, "&lt;");
    }

</script>
<script>
    hljs.initHighlightingOnLoad();
</script>
</body>
</html>